<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航菜单栏示例</title>
    <style>
        /* 通用样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #f0f4f8;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;
            /* 背景颜色 */
            border-top: 5px solid #FFD700;
            /* 上方黄条 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* 添加轻微阴影 */
            padding: 10px 0;
            /* 设置元素内边距，上下为10px 左右为0px */
            position: relative;
            /* 将元素的定位方式设置为相对定位 */
            z-index: 1000;
            /* 设置元素的堆叠顺序（z-index），即在 Z 轴（垂直屏幕方向）上的显示层级 */
            /* 确保导航栏及其下拉菜单显示在其他内容的前面，不会被页面中的其他元素遮挡。
               特别是在页面存在其他定位元素或浮动元素时，设置较高的 z-index 可以避免遮挡问题。 */
        }

        .navbar a {
            text-decoration: none;
            /* 去除超链接的下划线样式 */
            color: #333;
            font-size: 16px;
            /* 设置链接文本的字体大小 */
            display: flex;
            /* 变为弹性容器 */
            align-items: center;
            /* 居中 */
            padding: 10px 15px;
            /* 设置上下边距为10px 左右边距为15px */
            transition: color 0.3s, background 0.3s;
            /* 设置元素的过度效果，字体颜色0.3秒内过度，北京颜色0.3秒内过度 */
        }

        /* 设置鼠标悬浮效果 */
        .navbar a:hover {
            color: #f4b400;
            /* 鼠标悬浮时字体颜色 */
            /* text-decoration: underline; */
        }

        /* 下拉菜单 */
        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            /* 将下拉菜单默认隐藏，不在页面上显示
            下拉菜单在正常情况下是隐藏的，当鼠标悬停或点击时，
            通过 JavaScript 或 CSS 的 :hover 伪类将其显示出来。 */
            position: absolute;
            /* 将下拉菜单设置为绝对位置
            使得菜单可以精确的显示在主菜单下方，而不影响七大页面布局 */
            top: 100%;
            /* 下拉在主菜单下方 */
            left: 0;
            /* 左对齐 */
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            /* 为下拉菜单添加阴影 */
            min-width: 120px;
            /* 设置下拉菜单的最少宽度 */
            border-radius: 5px;
            /* 为下拉菜单添加圆角效果 */
            overflow: hidden;
            /* 如果下拉菜单中的内容超出边界，则将超出部分剪掉 */
        }

        .dropdown-content a {
            display: block;
            /* 将<a>设置成块级元素 */
            padding: 10px;
            color: #333;
        }

        .dropdown-content a:hover {
            background-color: #f4b400;
            color: #fff;
            /* 鼠标悬浮时，背景变为黄色，字体变为白色 */
        }

        /* 鼠标悬停时显示下拉菜单 */
        /* 之前利用display none 将菜单隐藏起来，此时利用:honer将他显示出来 */
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 导航菜单栏 -->
    <nav class="navbar">
        <a href="#"> 首页</a>
        <div class="dropdown">
            <a href="#"> learn</a>
            <div class="dropdown-content">
                <a href="#">C语言</a>
                <a href="#">Python</a>
                <a href="#">JavaScript</a>
            </div>
        </div>
        <a href="#"> 说说</a>
        <a href="#"> 友链</a>
        <a href="#"> 留言板</a>
        <a href="#"> 归档时间轴</a>
        <a href="#"> 登陆</a>
    </nav>
</body>

</html>